<template>
  <!-- <div></div> -->
  <el-menu-item
    v-if="props.data.menu.type === MenuType.page"
    :index="String(props.data.menu.key)"
    :route="props.data.route"
  >
    <el-icon v-if="props.data.menu.icon" size="20">
      <icon :name="props.data.menu.icon"></icon>
    </el-icon>
    <span>{{ props.data.menu.title }}</span>
  </el-menu-item>
  <template v-else-if="props.data.menu.type === MenuType.subMenu">
    <el-sub-menu
      v-if="props.data.children.length"
      :index="String(props.data.menu.key)"
    >
      <template #title>
        <el-icon v-if="props.data.menu.icon" size="20">
          <icon :name="props.data.menu.icon"></icon>
        </el-icon>
        <span>{{ props.data.menu.title }}</span>
      </template>
      <nav-menu-item
        v-for="(item, index) in props.data.children?.filter((v) =>
          useAuth().hasMenu(v.menu.key),
        )"
        :key="index"
        :data="item"
      ></nav-menu-item>
    </el-sub-menu>
  </template>
  <template v-else-if="props.data.menu.type === MenuType.group">
    <el-menu-item-group v-if="props.data.children.length">
      <template #title>
        <span>{{ props.data.menu.title }}</span>
      </template>
      <nav-menu-item
        v-for="(item, index) in props.data.children?.filter((v) =>
          useAuth().hasMenu(v.menu.key),
        )"
        :key="index"
        :data="item"
      ></nav-menu-item>
    </el-menu-item-group>
  </template>
</template>

<script setup lang="ts">
import { MenuType } from '~~/types/menu.d';
const props = defineProps(['data']);
</script>

<style scoped lang="scss"></style>
